<template>
  <div class="dashboard-editor-container">
    <div class= 'welcome'>
        欢迎使用依米云管家 
    </div>
    <ul class = 'items'>
      <li class = 'item'>
        <div>今日待手术台数</div>
        <h2>{{num01}}台</h2>
        <p>
          <router-link to="/patientManage/patientManage">查看详情</router-link>
        </p>
      </li>
      <li class = 'item'>
        <div>今日预约病人/术前确认病人</div>
        <h2>{{num02}}人/{{num03}}人</h2>
        <p>
          <router-link to="/appointmentManage/appointmentConfirm">查看详情</router-link>
        </p>
      </li>
      <li class = 'item'>
        <div>今日待随访任务</div>
        <h2>{{num04}}个</h2>
        <p>
          <router-link to="/followupManage/followup">查看详情</router-link>
        </p>
      </li>
      <li class = 'item last'>
        <div>日间手术准入术式</div>
        <h2>{{num05}}个</h2>
        <p>
          <span>开展病种数：25   日间床位数：24</span>
        </p>
      </li>
      
    </ul>
    <div class="box" style= 'display: flex;'>
      <div class="chart-wrapper" style = 'box-sizing: border-box; flex: 1; margin-right: 16px;'>
        <pie-chart :pieOptions = 'pieOptions'></pie-chart>
      </div>
      <div class="chart-wrapper"  style = 'box-sizing: border-box; flex: 1; margin-left: 16px;'>
        <bar-chart :barOptions= 'barOptions'></bar-chart>
      </div>
    </div>
    
    <div class="chart-wrapper">
      <line-chart :lineOptions = 'lineOptions'></line-chart>
    </div>
  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import RaddarChart from './components/RaddarChart'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'
import { getCount } from '@/api/myhome/index'

export default {
  name: 'dashboard-admin',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      num01: '0',
      num02: '0',
      num03: '0',
      num04: '0',
      num05: '0',
      num06: '0',
      num07: '0',
      num08: '0',
      pieOptions: {
        title: '测试项目',
        legend: ['测试项1', '测试项2', '测试项3', '测试项4', '测试项5'],
        data: [
          { value: 390, name: '测试项1' },
          { value: 240, name: '测试项2' },
          { value: 149, name: '测试项3' },
          { value: 100, name: '测试项4' },
          { value: 59, name: '测试项5' }
        ]
      },
      barOptions: {
        title: '测试项目2',
        xAxis: ['测试项21', '测试项22', '测试项23', '测试项24', '测试项25'],
        data: [79, 52, 200, 334, 390, 330, 220]
      },
      lineOptions: {
        legend: ['expectedData', 'actualData'],
        xAxis: ['测试项31', '测试项32', '测试项33', '测试项34', '测试项35'],
        expectedData: [180, 120, 161, 134, 105, 160, 165],
        actualData: [120, 82, 91, 154, 162, 140, 145]
      }
    }
  },
  mounted() {
    this.getCount()
  },
  methods: {
    getCount() {
      getCount().then((res) => {
        const item = res.data.data
        this.num01 = item.num01
        this.num02 = item.num02
        this.num03 = item.num03
        this.num04 = item.num04
        this.num05 = item.num05
        this.num06 = item.num06
        this.num07 = item.num07
        this.num08 = item.num08
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  .welcome{
    text-align: center;
    height: 100px;
    line-height: 100px;
    background-color: #fff;
    margin-bottom: 32px;
  }
  .items{
    display: flex;
    padding: 0;
    .item {
      flex: 1;
      list-style: none;
      background-color: #fff;
      margin-right: 32px;
      padding: 15px;
      &.last{
        margin-right: 0;
      }
      div{
        color: #999;
      }
      h2{
        text-align: center;
        padding: 32px;
      }
      p{
        margin: 0;
        padding: 15px 0 0;
        border-top: 1px solid #ddd;
      }
    }
  }
  .chart-wrapper {
    background-color: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>
